AWS Amplify の「Storage Browser for S3」コンポーネントで行える操作をひと通り確認してみた

こんにちは、製造ビジネステクノロジー部の若槻です。

前回のエントリでは、Amazon S3 上のデータを操作するコンポーネントを AWS Amplify で追加できる Storage Browser for S3 が GA されたので、アプリの実装まで実際に試してみました。

https://dev.classmethod.jp/articles/storage-browser-for-amazon-s3/

今回は、Storage Browser for S3 コンポーネントでユーザーがどんな操作が行えるのかをひと通り確認してみたので紹介します。

やってみた

前回実装した Amplify app の Domain の URL にアクセスします。認証なしでゲストアクセス可能としています。

実装内で定義したフォルダの一覧が表示されました。S3 バケット名は物理 ID がそのまま表示されるんですね。

ちなみにフォルダーや権限の定義は amplify/storage/resource.ts で下記のように行います。今回はゲストアクセスの場合は profile-pictures フォルダは読み取りのみ、picture-submissions フォルダは読み書きが可能となるように設定しています。

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
  name: 'amplifyTeamDrive',
  access: (allow) => ({
    'profile-pictures/{entity_id}/*': [
      allow.guest.to(['read']),
      allow.entity('identity').to(['read', 'write', 'delete']),
    ],
    'picture-submissions/*': [
      allow.authenticated.to(['read', 'write']),
      allow.guest.to(['read', 'write']),
    ],
  }),
});

ファイルの表示

read/write 権限がある picture-submissions フォルダを開いた様子です。格納されているファイルを確認することができます。

ファイルのダウンロード

ダウンロードボタンによりファイルをダウンロードすることができます。

ファイルのアップロード

ファイルおよびフォルダのアップロード操作を行うこともできます。

アップロード領域にファイルをドラッグアンドドロップして、一括でアップロードを行えます。

アップロードできました。

サブフォルダ作成

サブフォルダ作成を行うこともできます。

フォルダ名を指定する UI です。

作成が完了したようです。Exit で戻ります。

サブフォルダ test が作成されていますね。

ファイルのコピー

ファイルを選択してコピーを行うこともできます。

コピー先を指定する UI です。

サブフォルダー内へのコピーも行えます。先ほど作成した test フォルダにコピーしてみます。

コピーが完了したようです。Exit で戻ります。

指定したサブフォルダー内にファイルがコピーされていますね。

パンくずリスト

ちなみにスタイルの都合上分かりづらいですが、上部がフォルダパスのパンくずリストメニューとなっています。ここから現在の位置を確認したり上位のメニューに戻ったりすることができます。

ファイルの削除

ファイルの削除を行うこともできます。

この時点での実装ではゲストアクセスのユーザーでは権限がなかったため、amplify/storage/resource.ts を修正してゲストユーザーにも削除権限を追加します。

git diff amplify/storage/resource.ts
diff --git a/amplify/storage/resource.ts b/amplify/storage/resource.ts
index f6ac67b..73ea719 100644
--- a/amplify/storage/resource.ts
+++ b/amplify/storage/resource.ts
@@ -9,7 +9,7 @@ export const storage = defineStorage({
     ],
     'picture-submissions/*': [
       allow.authenticated.to(['read','write']),
-      allow.guest.to(['read', 'write'])
+      allow.guest.to(['read', 'write', 'delete'])
     ],
   })
 });

修正をプッシュしてAmplify のデプロイを開始します。

デプロイ完了後に Storage Browser に戻り、ファイルを選択してメニューを開くと削除ボタンが表示されました。

削除確認用の UI から削除を実行します。

削除が完了しました。Exit で戻ります。

削除できたようです。

ちなみにサブフォルダーの削除はできないようでした。

ファイルの検索

ファイル名での検索を行うこともできます。検索欄に入力した logo を名前に含むファイルのみがフィルター表示されました。

また Include subfolders　にチェックを入れればサブフォルダー内も検索対象となります。

read 権限のみの場合

read 権限のみがある profile-pictures フォルダを開いた様子です。実際にはまだ profile-pictures フォルダは未作成のため No files. と表示されています。

AWS マネジメントコンソールで profile-pictures フォルダを作成し、ファイルをアップロードします。

Storage Browser に戻り、右上の更新ボタンでリロードすると、アップロードされたファイルが表示されました。また右上のメニューは権限の制限によりちゃんとアクセス不可となっています。

おわりに

Storage Browser for S3 コンポーネントでユーザーがどんな操作が行えるのかをひと通り確認してみたので紹介しました。

ここまで充実した UI を簡単に実装できるのはなかなか便利ですね。細かい権限制御ができるのも嬉しいです。

以上